import React from 'react'
import { Layout, Button,Dropdown,Avatar } from 'antd'
import { MenuUnfoldOutlined, MenuFoldOutlined,UserOutlined } from '@ant-design/icons'

const { Header } = Layout;
const items = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        超级管理员
      </a>
    ),
  },
  {
    key: '4',
    danger: true,
    label: (
      <a rel="noopener noreferrer" href="/login">
      退出登录
    </a>
    ),
  },
];

export default function TopHeader() {
  const [collapsed, setCollapsed] = React.useState(false);
  
  return (
    <div>
      <Header style={{ padding: 0, background: "white" }}>
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => setCollapsed(!collapsed)}
          style={{
            fontSize: '16px',
            width: 64,
            height: 64,
          }}
        />
        <div style={{ float: 'right', margin: 0, padding: 0, fontSize: '16px' }}>
          <span>
            欢迎admin回来
          </span>
          <Dropdown menu={{ items }}>
            <Avatar size={40} icon={<UserOutlined />} />
          </Dropdown>
        </div>

      </Header>
    </div>
  )
}
